<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <base href="<%=request.getContextPath()%>/">
    <link rel="stylesheet" href="static/layui/css/layui.css">
    <link rel="stylesheet" href="static/css/base.css">
    <script src="static/js/jquery.js"></script>
    <script src="static/js/ajax.js"></script>
    <script src="static/layui/layui.js"></script>
</head>
<body>
<div class="layui-panel">
    <form class="layui-form" style="margin: 10px auto">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label for="username" class="layui-form-label">用户名</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" name="username" id="username" placeholder="用户名">
                </div>
            </div>
            <div class="layui-inline">
                <label for="nickname" class="layui-form-label">昵称</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" name="nickname" id="nickname" placeholder="昵称">
                </div>
            </div>
            <div class="layui-inline">
                <label for="phone" class="layui-form-label">手机号</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" name="phone" id="phone" placeholder="手机号">
                </div>
            </div>
            <c:if test="${loginInfo.role == 1}">
                <div class="layui-inline">
                    <label for="departmentId" class="layui-form-label">部门</label>
                    <div class="layui-input-inline">
                        <select name="departmentId" id="departmentId">
                            <option value="">[选择部门]</option>
                        </select>
                    </div>
                </div>
            </c:if>
            <div class="layui-inline">
                <label for="role" class="layui-form-label">角色</label>
                <div class="layui-input-inline">
                    <select name="role" id="role">
                        <option value="">[选择角色]</option>
                        <option value="1">管理员</option>
                        <option value="2">负责人</option>
                        <option value="3">打工人</option>
                        <option value="4">司机</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label for="status" class="layui-form-label">状态</label>
                <div class="layui-input-inline">
                    <select name="status" id="status">
                        <option value="">[选择状态]</option>
                        <option value="1">可用</option>
                        <option value="2">禁用</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <button type="submit" lay-submit lay-filter="searchBtn" class="layui-btn">查询</button>
                    <button type="reset" class="layui-btn">清空</button>
                </div>
            </div>
        </div>

    </form>
</div>
<div class="layui-panel">
    <table id="dataTable"></table>
</div>
</body>
<script type="text/html" id="toolbar">
    <c:if test="${loginInfo.role == 1}">
        <button type="button" class="layui-btn layui-btn-sm layui-bg-blue" lay-event="add">添加</button>
    </c:if>
</script>
<script type="text/html" id="statusTemp">
    {{# if(d.status === 1){ }}
    <button type="button" class="layui-btn layui-btn-sm layui-bg-green" lay-event="status">可用</button>
    {{# }else{ }}
    <button type="button" class="layui-btn layui-btn-sm layui-bg-red" lay-event="status">禁用</button>
    {{# } }}
</script>
<script type="text/html" id="optTemp">
    <button type="button" class="layui-btn layui-btn-sm layui-bg-blue" lay-event="update">修改</button>
    <c:if test="${loginInfo.role == 1}">
        <button type="button" class="layui-btn layui-btn-sm layui-bg-blue" lay-event="delete">删除</button>
    </c:if>
</script>
<script>
    const {table, form} = layui;
    $(function () {
        getCategoryList();
        table.render({
            elem: "#dataTable",
            url: "userinfo/page",
            page: true,
            limit: 5,
            limits: [5, 10, 20, 50, 100],
            toolbar: "#toolbar",
            cols: [[
                {field: "id", title: "编号"},
                {field: "username", title: "用户名"},
                {field: "nickname", title: "昵称"},
                {field: "phone", title: "手机号"},
                {
                    field: "role", title: "角色", templet: function (d) {
                        switch (d.role) {
                            case 1:
                                return "管理员";
                            case 2:
                                return "负责人";
                            case 3:
                                return "打工人";
                            case 4:
                                return "司机";
                            default:
                                return "角色异常";
                        }
                    }
                },
                {
                    field: "departmentId", title: "部门", templet: function (d) {
                        return d?.department?.name || '-'
                    }
                },
                {field: "status", title: "状态", templet: "#statusTemp"},
                {title: "操作", templet: "#optTemp"}
            ]]
        });
        form.on("submit(searchBtn)", function (data) {
            table.reload("dataTable", {
                where: data.field,
                page: {
                    curr: 1
                }
            })
            return false;
        })
        table.on("tool(dataTable)", function (data) {
            const event = data.event;
            // const id = data.data.id;
            // const role = data.data.role;
            const {id, role} = data.data;
            switch (event) {
                case "status":
                    if ("${loginInfo.role}" == 1) {
                        if (role == 1) {
                            layer.alert('管理员状态不可更改！', {icon: 5});
                            return;
                        }
                        if (id == "${loginInfo.id}") {
                            layer.alert('当前登录用户状态不可更改！', {icon: 5});
                            return;
                        }
                        layer.confirm(`确定更改编号[\${id}]的状态吗？`, {icon: 3, title: "询问"}, function (index) {
                            ajax.post("userinfo/status", {
                                id, status: data.data.status === 1 ? 2 : 1
                            }).then(() => {
                                layer.msg("操作成功！", {icon: 6});
                                reloadTable();
                            })
                            layer.close(index);
                        })
                    }
                    break;
                case "delete":
                    if (role == 1) {
                        layer.alert('管理员不可删除！', {icon: 5});
                        return;
                    }
                    if (id == "${loginInfo.id}") {
                        layer.alert('当前登录用户不可删除！', {icon: 5});
                        return;
                    }
                    layer.confirm(`确定删除编号[\${id}]的数据吗？`, {icon: 3, title: "询问"}, function (index) {
                        ajax.delete("userinfo/delete/" + id).then(() => {
                            layer.msg("删除成功！", {icon: 6});
                            reloadTable();
                        })
                        layer.close(index);
                    })
                    break;
                case "update":
                    layer.open({
                        type: 2,
                        content: "userinfo/edit?id=" + id,
                        area: ["600px", "500px"]
                    })
                    break;
            }

        })
        table.on("toolbar(dataTable)", function (data) {
            if (data.event === "add") {
                layer.open({
                    type: 2,
                    content: "userinfo/edit",
                    area: ["600px", "500px"]
                })
            }
        })
    })

    function reloadTable() {
        table.reload('dataTable');
    }

    function getCategoryList() {
        ajax.get('department/select').then(data => {
            const departmentList = data.data;
            departmentList.forEach(item => {
                $("#departmentId").append(`<option value="\${item.id}">\${item.name}\${item.status == 1 ?'': ' (禁用)'}</option>`)
            })
            form.render();
        })
    }
</script>
</html>

